<template>
  <Header :title="title"></Header>
  <div
    class="fui-page order-create-page fui-page-current"
    style="height: 100%; margin-top: 40px"
  >
    <div class="fui-content navbar">
      <div class="totals">
        <span>订单号</span>
        <div class="num">
          <span class="iconfont icon-renminbi1688"></span>{{ data.oid }}
        </div>
      </div>
      <div class="totals">
        <span>总计</span>
        <div class="num">
          <span class="iconfont icon-renminbi1688"></span>{{ data.money }}
        </div>
      </div>
      <div class="pay">
        <div class="channel">
          <div class="left">
            <span class="wx iconfont icon-weixin"></span>
            <span>微信支付</span>
          </div>
          <div class="right">
            <label>
              <input
                type="radio"
                name="pay_type"
                checked="checked"
                value="1"
                v-model="is_pay"
              />
            </label>
          </div>
        </div>

        <div class="channel">
          <div class="left">
            <span class="zfb iconfont icon-zhifubaozhifu"></span>
            <span>支付宝</span>
          </div>
          <div class="right">
            <label>
              <input type="radio" name="pay_type" value="2" v-model="is_pay" />
            </label>
          </div>
        </div>
      </div>
      <!-- 支付按钮 -->
      <div class="fui-navbar">
        <div class="nav-item total">
          需付：<span class="text-danger size0-75rem">{{ data.money }}</span>
          <button
            class="nav-item btn btn-danger buybtn"
            style="width: 200px; margin-left: 10px"
            @click="payOrderFun"
          >
            确定支付
          </button>
        </div>
      </div>
      <!-- 支付按钮end -->
    </div>
  </div>
</template>
<script>
import Header from "../../components/Header.vue";
import { getOrder, payOrder } from "../../network/index.js";
import { inject, reactive, toRefs } from "vue";

export default {
  components: {
    Header,
  },
  setup() {
    const route = inject("route");
    const router = inject("router");

    const data = new reactive({
      is_pay: "1",
      data,
    });

    getOrder({ id: route.query.id }).then((e) => {
      data.data = e;
    });

    function payOrderFun() {
      payOrder({ id: route.query.id, is_pay: data.is_pay }).then((e) => {
        if (e.status === 2) {
          // console.log(
          //   "route.query.id",
          //   "my_order_details?id=" + route.query.id
          // );
          //           router.push({
          //     path: "my_order_details?id=" + route.query.id
          // });
          router.push({
            path: "my_order_details",
            query: { id: route.query.id },
          });
        }
      });
    }

    return {
      title: "购买课程",
      payOrderFun,
      ...toRefs(data),
    };
  },
};
</script>
<style scoped>
.fui-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  box-sizing: border-box;
  display: none;
}
.order-create-page {
  margin: 0;
  bottom: 2rem;
  padding-bottom: 2rem;
  display: block;
  overflow: hidden;
}
.fui-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fui-content.navbar {
  bottom: 2.5rem;
  padding-bottom: 2.2rem;
}
/* 支付按钮 */
.fui-navbar {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 2.45rem;
  background: #fff;
  z-index: 2;
}
.fui-navbar .nav-item {
  position: relative;
  display: table-cell;
  height: 2.45rem;
  text-align: center;
  vertical-align: middle;
  width: 1%;
  color: #999;
}
.total {
  padding-left: 0;
  padding-right: 0.5rem;
  font-size: 0.7rem;
  height: 2.45rem;
}
.order-create-page .buybtn {
  border: none;
  font-size: 0.7rem;
  color: #fff;
  border-radius: 0;
  width: 0.2%;
}
.fui-navbar .nav-item.btn {
  color: #fff;
  border-radius: 0;
}
.btn.btn-danger {
  background: #ff5555;
  color: #fff;
  border: 1px solid #ff5555;
}
.totals {
  background-color: #fff;
  padding: 20px;
  height: 60px;
  display: flex;
  place-content: space-between;
  color: gray;
  font-size: large;
  margin: 20px 0;
}
.pay {
  background-color: #fff;
  padding: 20px;
  height: 140px;
  margin: 20px 0;
  color: gray;
  font-size: 12px;
}
.pay .channel {
  padding: 10px;
  display: flex;
  place-items: center;
  place-content: space-between;
}
.pay .channel .left {
  font-size: larger;
  display: flex;
  place-items: center;
}
.pay .channel .left .wx {
  color: forestgreen;
}
.pay .channel .left .zfb {
  color: deepskyblue;
}
.pay .channel .left .iconfont {
  font-size: xx-large;
  margin-right: 10px;
}
.pay .channel + * {
  border-top: 1px solid lightgray;
}
</style>
